<!-- parents-info-page  -->
<template>
  <div class="content has_breadcrumb">
    <base-breadcrumb
      :data="[
        {
          routeName: 'parents',
          name: 'parents',
        },
        {
          name: 'Ada Yeo',
        },
      ]"
      separator=">"
      separatorClass="iconfont iconnavigate_next-px"
      slot="breadcrumb"
    />
    <GgPage pageType="2" title="parents">
      <template v-slot:left>
        <gg-flex-menus
          :menus="menuDatas"
          @select="menuSelect"
          :default-active="activeIndex"
        />
      </template>
      <!-- 表格 -->
      <div class="connections-content">
        <edoovo-table
          ref="connectionsTable"
          :data="tableData1"
          default-value="-"
          rowKey="id"
        >
          <edoovo-table-column
            size="L"
            label="Children"
            prop="childrenName"
            :tooltip="false"
            v-slot="{ row }"
          >
            <div>
              <head-img
                class="table-cell-img"
                :src="row.avatar"
                line-height="48"
                @click="() => {}"
              ></head-img>
              <label class="table-cell-name">{{ row.childrenName }}</label>
            </div>
          </edoovo-table-column>
          <edoovo-table-column
            size="XL"
            label="schools"
            prop="schools"
            :tooltip="false"
            v-slot="{ row }"
          >
            <div>
              <img :src="row.schoolImg" class="table-cell-img school-img" />
              <label class="table-cell-name">{{ row.schools }}</label>
            </div>
          </edoovo-table-column>
          <edoovo-table-column
            size="M"
            label="Status"
            prop="status"
            :tooltip="false"
          ></edoovo-table-column>
          <edoovo-table-column
            size="M"
            label="Date"
            prop="date"
            :tooltip="false"
            ƒ
          ></edoovo-table-column>
        </edoovo-table>
        <!-- <md-table>
          <md-table-row>
            <md-table-head>Children</md-table-head>
            <md-table-head>schools</md-table-head>
            <md-table-head>Status</md-table-head>
            <md-table-head>Date</md-table-head>
          </md-table-row>

          <md-table-row>
            <md-table-cell>
              <div class="table-cell-box">
                <head-img
                  class="table-cell-img"
                  :src="avatar"
                  line-height="48"
                  @click="() => {}"
                ></head-img>
                <label class="table-cell-name">Ada Li</label>
              </div>
            </md-table-cell>
            <md-table-cell>
              <div class="table-cell-box">
                <img :src="avatar" class="table-cell-img school-img" />
                <label class="table-cell-name">sdubbin0@geocities.com</label>
              </div>
            </md-table-cell>
            <md-table-cell>Connected</md-table-cell>
            <md-table-cell>06/10/2020</md-table-cell>
          </md-table-row>
        </md-table> -->
      </div>
    </GgPage>
  </div>
</template>

<script>
export default {
  name: "parentsInfo",
  data() {
    return {
      menuDatas: [
        {
          name: "Parent Info ",
          key: "parentsInfo",
          active: true,
          children: [],
        },
        {
          name: "Connections",
          key: "connections",
          children: [],
        },
      ],
      activeIndex: "parentsInfo",
      borderLessData: [
        { label: "First Name", value: "xxx xxx" },
        { label: "Last Name", value: "xxx xxx" },
        { label: "Email", value: "xxx" },
        { label: "Phone", value: "xxxxxx" },
        { label: "Job title", value: "xxx" },
        { label: "Working type", value: "xxx" },
      ],
      tableData1: [
        {
          id: 1,
          status: "connected",
          date: "2020/10/27",
          schoolImg:
            "https://edoovo-hk.oss-accelerate.aliyuncs.com/uat_avatar/2020-09-11/bd537d11fcbf4c398c047d377a62d681-130423902631638220815238764789965073975.png",
          schools: "test1@edoovo.com",
          childrenName: "Ada li",
          avatar:
            "https://edoovo-hk.oss-accelerate.aliyuncs.com/uat_avatar/2020-09-11/bd537d11fcbf4c398c047d377a62d681-130423902631638220815238764789965073975.png",
        },
        {
          id: 2,
          status: "connected",
          date: "2020/10/27",
          schoolImg:
            "https://edoovo-hk.oss-accelerate.aliyuncs.com/uat_avatar/2020-09-11/bd537d11fcbf4c398c047d377a62d681-130423902631638220815238764789965073975.png",
          schools: "test1@edoovo.com",
          childrenName: "nike",
          avatar:
            "https://edoovo-hk.oss-accelerate.aliyuncs.com/uat_avatar/2020-09-11/bd537d11fcbf4c398c047d377a62d681-130423902631638220815238764789965073975.png",
        },
      ],
      avatar:
        "https://edoovo-hk.oss-accelerate.aliyuncs.com/uat_avatar/2020-09-11/bd537d11fcbf4c398c047d377a62d681-130423902631638220815238764789965073975.png",
    };
  },
  methods: {
    menuSelect(key, item) {
      console.log(key, item);
      this.activeIndex = key;
      this.$router.push(`/${key}`);
    },
  },
  created() {},
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类

.avatar-con {
  display: flex;
  box-sizing: border-box;
  padding: 20px;
  background-color: #fff;
  width: 492px;
  .borderless-left {
    margin-right: 20px;
    min-width: 140px;
    max-width: 220px;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 500;
    color: #202124;
  }
}
.info {
  color: #b4b4b4;
  font-size: 14px;
  font-family: Roboto;
  .status {
    color: #0b8043;
  }
}
.connections-content {
  border: 1px solid #e0e0e0;
  border-radius: 13px;
  overflow: hidden;

  /deep/ .edoovo-table-cell-inner {
    font-family: Roboto;
    color: #202124;
    font-size: 14px;
  }
  /deep/ .edoovo-thead .edoovo-table-cell-inner {
    font-family: OpenSans-Bold;
    color: #5f6368;
    font-size: 20px;
  }
  /deep/ .edoovo-thead .edoovo-table-cell {
    background: none;
  }
  /deep/ .edoovo-tbody-row {
    height: 88px;
  }
  /deep/.edoovo-tbody-row:last-child .edoovo-table-cell {
    border-bottom: 0;
  }

  .school-img {
    width: 80px;
    height: 40px;
    object-fit: fill;
  }
}
</style>